@charset "UTF-8";
$design-width:480px;/*设计搞得宽度*/
$design-icon-width:1024px;/*背景图002.png的宽度*/
  $icon-width-num:232px;/*背景图002.png的宽度*/
  $icon-width-numsmall:200px;/*背景图002.png的宽度*/
  @function bgSize($px){
    @return $px / $design-width * 10rem; 
  }
  @function bgPosition($px,$offsetLeft){
    @return $offsetLeft * $px / $design-width * 10rem; 
  }
  @function toRem($px){
    @return $px / $design-width * 10rem; 
  }
  $runBox:toRem(58px);
  @function runBoxPosition($num){
    @return $num * $runBox; 
  }
  .number {
    text-align: right;
    .num {
      display: inline-block;
      width: toRem(23px);
      height: toRem(33px);
      background:url(../images/ziti_jp.png) no-repeat;
      background-size: bgSize($icon-width-num) auto;
    }
    $class-slug: num !default; 
    @for $i from 0 through 10 { 
    .#{$class-slug}_#{$i}{ 
      background-position: bgPosition(-23px,$i) 0;
    }
  }

  }
  #app {
    overflow: auto;
    position: absolute;
    top: 0;left: 0;
    bottom: 0;
    right:0;
    background: #000;
  }
  #game {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    max-width: 750px;
    min-width: 320px;
    min-height: 480px;
    margin: 0 auto;
    background: #000 url(../images/machine1_bg.png) top center no-repeat;
    background-size: 100% auto;
  }

  #menu {
    position: absolute;
    top:toRem(8px);
    left:toRem(8px);
    width: toRem(45px);
    height: toRem(45px);
    background:url(../images/icon.png) no-repeat;
    background-size: bgSize($design-icon-width) auto;
    background-position: toRem(-50px) toRem(-978px);
  }
  #menuList {
    display: none;
    position: absolute;
    z-index: 2;
    top:toRem(60px);
    left:toRem(2px);
    width: toRem(225px);
    background:rgba(31, 4, 14, 0.8);
    border: 3px solid rgba(232,155,79,0.8);
    border-radius: 10px;
    &.active {
      display: block;
    }
    .close {
        position: absolute;
        z-index: 1;
        top:toRem(-25px);
        right:toRem(-25px);
        width:toRem(50px);
        height:toRem(50px);
        background:url(../images/dialog-close.png);
        background-size:100% ;
      }
    .list_wrap {
      max-height: 350px;
      overflow-y: auto;
    }
    a {
      border:1px solid rgba(0,0,0,0.6);
      border-top:none;
      display: block;
      height: toRem(60px);
      line-height: toRem(60px);
      color: #e6bd76;
      font-size: toRem(20px);
      padding-left: toRem(65px);
      position: relative;
      box-shadow:0 5px 10px rgba(255,255,255,0.2) inset,0 -5px 10px rgba(255,255,255,0.2) inset;
      i{
        transform:scale(0.7);
        -webkit-transform:scale(0.7);
        display: block;position: absolute;
        top: 50%;
        display: none;
        left: toRem(15px);
        background:url(../images/icon.png) no-repeat;
        background-size: bgSize($design-icon-width) auto;
        background-position: -1000px -1000px;
        width: toRem(55px);
        margin-top:toRem(-25px);
        height: toRem(55px);
      }
      &.list0{
        border-top: 1px solid rgba(0,0,0,0.6);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
         i {
          background-position: toRem(-750px) toRem(-54px);
        }
      }
      &.list1 i {
        background-position: toRem(-750px) toRem(-100px);
      }
      &.list2 i {
        background-position: toRem(-750px) toRem(-152px);
      }
      &:last-child{
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
  }
  #help {
    position: absolute;
    top:toRem(8px);
    right:toRem(8px);
    width: toRem(45px);
    height: toRem(45px);
    background:url(../images/icon.png) no-repeat;
    background-size: bgSize($design-icon-width) auto;
    background-position: toRem(-255px) toRem(-975px);
  }
  #chongzhiBtn {
    position: absolute;
    display: block;
    top:toRem(8px);
    right:toRem(60px);
    width: toRem(45px);
    height: toRem(45px);
    background:url(../images/icon.png) no-repeat;
    background-size: bgSize($design-icon-width) auto;
    background-position: toRem(-255px) toRem(-921px);
  }
  #score {
    position: absolute;
    top:toRem(100px);
    left:toRem(36px);
    width: toRem(185px);
  }
  #total {
    position: absolute;
    top:toRem(100px);
    left:toRem(256px);
    width: toRem(185px);
  }
  #run-item {
    position: relative;
    width: toRem(402px);
    height: toRem(402px);
    margin-top: 3.01rem;
    margin-left: 0.8rem;
  }
  #run-item > div {}

  #run-box  {
    > div {
    position: absolute;
    width: toRem(58px);
    height: toRem(58px);
    box-shadow:0 0 toRem(10px) rgba(255, 20, 17, 0.5);
    background:url(../images/icon.png) no-repeat;
    background-size: bgSize($design-icon-width) auto;
    }
  }
  #activeBtnGroup {
    margin-left: toRem(20px);
    margin-top: toRem(15px);
    height: toRem(58px);
    div {
      float:left;
      background:url(../images/icon.png) no-repeat;
      background-size: bgSize($design-icon-width) auto;
    }
    .addAll {
      width:toRem(58px);
      height:toRem(58px);
      background-position: 0 toRem(-270px);
      &.active {
        background-position: toRem(-66px) toRem(-270px);
      }
      &.disabled{
        background-position: toRem(-130px) toRem(-270px);
      }
    }
    .leftBtn {
      width:toRem(72px);
      height:toRem(58px);
      background-position: toRem(-402px) toRem(-400px);
      &.active {
        background-position: toRem(-477px) toRem(-400px);
      }
      &.disabled{
        background-position: toRem(-550px) toRem(-400px);
      }
    }
    .rightBtn {
      width:toRem(72px);
      height:toRem(58px);
      background-position: toRem(-402px) toRem(-459px);
      &.active {
        background-position: toRem(-477px) toRem(-459px);
      }
      &.disabled{
        background-position: toRem(-550px) toRem(-459px);
      }
    }
    .range1 {
      width:toRem(58px);
      height:toRem(58px);
      margin-left: toRem(10px);
      background-position: 0 0;
      &.active {
        background-position: toRem(-66px) 0;
      }
      &.disabled{
        background-position: toRem(-130px) 0;
      }
    }
    .range2 {
      width:toRem(58px);
      height:toRem(58px);
      margin-left: toRem(6px);
      background-position: 0 toRem(-65px);
      &.active {
        background-position: toRem(-66px) toRem(-65px);
      }
      &.disabled{
        background-position: toRem(-130px) toRem(-65px);
      }
    }
    .start {
      width:toRem(108px);
      height:toRem(58px);
      margin-left: toRem(6px);
      background-position: toRem(-402px) toRem(-340px);
      &.active {
        background-position: toRem(-515px) toRem(-340px);
      }
      &.disabled{
        background-position: toRem(-625px) toRem(-340px);
      }
    }
  }
  #optionNumber {
    position: absolute;
    top:toRem(668px);
    left:toRem(20px);
    .list {
      float: left;
      width: toRem(46px);
      height: toRem(30px);
      margin-right: toRem(10px);
      .num {
        width: toRem(20px);
        height: toRem(30px);
        background:url(../images/paidaxiaoshuzi.png) no-repeat;
        background-size: bgSize($icon-width-numsmall) auto;
      }
      $class-slug: num !default; 
      @for $i from 0 through 10 { 
        .#{$class-slug}_#{$i}{
          background-position: bgPosition(-20px,$i) 0;
        }
      }
    }
  }
  #optionBtnGroup {
    position: absolute;
    top:toRem(705px);
    left: 0;
    margin-left: toRem(2px);
    height: toRem(58px);
    div {
      float:left;
      width:toRem(57px);
      height:toRem(53px);
      margin-right: toRem(3px);
      background:url(../images/icon.png) no-repeat;
      background-size: bgSize($design-icon-width) auto;
    }
    .bar {
      background-position: 0 toRem(-335px);
      &.active {
        background-position: toRem(-66px) toRem(-335px);
      }
      &.disabled{
        background-position: toRem(-130px) toRem(-335px);
      }
    }
    .seven {
      background-position: 0 toRem(-200px);
      &.active {
        background-position: toRem(-66px) toRem(-200px);
      }
      &.disabled{
        background-position: toRem(-130px) toRem(-200px);
      }
    }
    .star {
      background-position: 0 toRem(-830px);
      &.active {
        background-position: toRem(-66px) toRem(-830px);
      }
      &.disabled{
        background-position: toRem(-130px) toRem(-830px);
      }
    }
    .watermelons {
      background-position: 0 toRem(-692px);
      &.active {
        background-position: toRem(-66px) toRem(-692px);
      }
      &.disabled{
        background-position: toRem(-130px) toRem(-692px);
      }
    }
    .alarm {
      background-position: 0 toRem(-760px);
      &.active {
        background-position: toRem(-66px) toRem(-760px);
      }
      &.disabled{
        background-position: toRem(-130px) toRem(-760px);
      }
    }
    .coconut {
      background-position: 0 toRem(-626px);
      &.active {
        background-position: toRem(-66px) toRem(-626px);
      }
      &.disabled{
        background-position: toRem(-130px) toRem(-626px);
      }
    }
    .orange {
      background-position: 0 toRem(-401px);
      &.active {
        background-position: toRem(-66px) toRem(-401px);
      }
      &.disabled{
        background-position: toRem(-130px) toRem(-401px);
      }
    }
    .apple {
      margin-right: 0;
      background-position: 0 toRem(-560px);
      &.active {
        background-position: toRem(-66px) toRem(-560px);
      }
      &.disabled{
        background-position: toRem(-130px) toRem(-560px);
      }
    }
  }
  #JPBtn {
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: toRem(-27px);margin-left: toRem(-27px);
    width: toRem(54px);
    height: toRem(54px);
    background:url(../images/icon.png) no-repeat;
    background-size: bgSize($design-icon-width) auto;
    background-position: toRem(-465px) toRem(-80px);
    &.light{
      background-position: toRem(-434px) toRem(-223px);
    }
  
    }

  #centerScore {
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: toRem(65px);
    margin-left: toRem(-36px);
    width: toRem(72px);
    height: toRem(46px);
    background:url(../images/icon.png) no-repeat;
    background-size: bgSize($design-icon-width) auto;
    background-position: toRem(-732px) 0;
    padding-right: toRem(11px);
    padding-top: toRem(8px);
    .num:nth-child(1) {
      margin-right:  toRem(2px);
      }
  }
  #light {
    position: absolute;
    top: toRem(0px);
    left: 50%;
    margin-left: toRem(-122px);
    width: toRem(244px);
    height: toRem(85px);
    background:url(../images/icon.png) no-repeat;
    background-size: bgSize($design-icon-width) auto;
    background-position: toRem(-547px) toRem(-904px);
  }
  #typeNumber {
    position: absolute;
    top: toRem(630px);
    left:toRem(78px) ;
    > div {
      position: relative;
      float: left;
      width: toRem(153px);
      height: toRem(32px);
      background:url(../images/icon.png) no-repeat;
      background-size: bgSize($design-icon-width) auto;
    }
    .box1 {
      background-position: toRem(-549px) toRem(-809px);
    }
    .box2 {
      margin-left: toRem(18px);
      background-position: toRem(-549px) toRem(-843px);
    }
    .num {
      display: none;
      position: absolute;
      top:0;
      left: 0;
      width: toRem(51px);
      height: toRem(28px);
      background:url(../images/icon.png) no-repeat;
      background-size: bgSize($design-icon-width) auto;
    }
    .active_40 .num_40,.active_30 .num_30, .active_20 .num_20,.active_15 .num_15,.active_10 .num_10{display: block}
    .showAll .num {display: block !important}
    .num_40 {
      background-position: toRem(-127px) toRem(-508px);
    }
    .num_30 {
      left:toRem(51px);
      background-position: toRem(-181px) toRem(-508px);
    }
    .num_20 {
      background-position: toRem(-309px) toRem(-778px);
    }
    .box1 .num_20 {
      left:toRem(100px);
    }
    .num_15 {
      left:toRem(51px);
      background-position: toRem(-363px) toRem(-778px);
    }
    .num_10 {
      left:toRem(102px);
      background-position: toRem(-397px) toRem(-897px);
    }
  }
  #dialog-opa {
      display: none;
      position: fixed;
      top:0;left:0;right:0;bottom:0;
      background:rgba(0,0,0,0.5);
      z-index:9;
  }
  #dialog {
    display: none;
      width: 80%;
      position: fixed;
      top:40%;left:10%;
      margin-top: toRem(-100px);
      z-index:10;
      border: 5px solid #efa140;
      box-shadow:0 0 5px rgba(0,0,0,0.5),0 0 2px rgba(0,0,0,0.7) inset;
      border-radius: 10px;
      .close {
        position: absolute;
        top:toRem(-25px);
        right:toRem(-25px);
        width:toRem(50px);
        height:toRem(50px);
        background:url(../images/icon.png) no-repeat;
        background-size: bgSize($design-icon-width) auto;
        background-position: toRem(-476px) 0;
      }
      .title{
        font-size: toRem(24px);
        height: toRem(52px);
        line-height: toRem(52px);
        background:url(../images/dialog-title.png) repeat-x;
        background-size:auto toRem(52px);
        text-align:center;
        color:#fffbcf;
        text-shadow:0 0 5px rgba(0,0,0,0.3)
      }
      .body{
          padding: toRem(20px);
          /* background:url(../images/dialog-title.png) repeat;
          background-size: toRem(428px) auto;*/
          background-color: #8c6627;
          color:#fffbcf;
          max-height: toRem(300px);
          overflow: hidden;
          overflow-y: auto;
          img {
            max-width:100% !important;
          }
          .tip {
            font-size: toRem(24px);
          }
      }
      .footer{
        padding: toRem(10px) 0;
        text-align: center;
      }
  }
   .dialog-menu {
     display: none;
     position: fixed;
    top:0;left:0;right:0;bottom:0;
    z-index: 5;
     &.active {
       display: block;
     }
    .dialog-opa {
        position: absolute;
        top:0;left:0;right:0;bottom:0;
        background:rgba(0,0,0,0.5);
        z-index:5;
    }
   .dialog-menu-content {
      width: 80%;
      position: absolute;
      top:30%;left:10%;
      margin-top: toRem(-100px);
      z-index:6;
      border: 5px solid #efa140;
      box-shadow:0 0 5px rgba(0,0,0,0.5),0 0 2px rgba(0,0,0,0.7) inset;
      border-radius: 10px;
      .close {
        position: absolute;
        top:toRem(-25px);
        right:toRem(-25px);
        width:toRem(50px);
        height:toRem(50px);
        background:url(../images/icon.png) no-repeat;
        background-size: bgSize($design-icon-width) auto;
        background-position: toRem(-476px) 0;
      }
      .title{
        font-size: toRem(24px);
        height: toRem(52px);
        line-height: toRem(52px);
        background:url(../images/dialog-title.png) repeat-x;
        background-size:auto toRem(52px);
        text-align:center;
        color:#fffbcf;
        text-shadow:0 0 5px rgba(0,0,0,0.3)
      }
      .body{
          padding: toRem(20px);
          background:url(../images/dialog-title.png) repeat;
          background-size: toRem(428px) auto;
          color:#fffbcf;
          overflow: hidden;
          overflow-y: auto;
          img {
            max-width:100% !important;
          }
      }
      .scrollBox {
            height: toRem(300px);
            overflow: hidden;
            overflow-y: auto;
            li {
              line-height:toRem(30px);
              padding: 0 3px;
              border-bottom: 1px solid #613e03;
            }
            .rankingList {
              padding: toRem(6px) 0 ;
            }
            .name {
              max-width: 60%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;
            }
            .pull-left {
              float: left;
            }
            .pull-right {
              text-align: right;
              float: right;
            }
          }
          .totalMoney {
            font-size: toRem(16px);
            padding: 5px ;
            margin: 0 -5px 10px;
            background: #754509;
            border-radius: 4px;
            span {
              font-size:toRem(20px);
            }
          }
      .scroll-loading-wrapper {position: absolute;left: 50%;bottom: 25px; }
   }
  }
  .pay-list {
    text-align: center;
    p {
      color:#ffce1d;
      padding:0  0 toRem(10px);
      font-size: 14px;
    }
    .list {
      li{
        float:left;
        width:50%;
        padding:toRem(10px);
      }
      a {
        
        display: block;
        max-width:toRem(300px);
        margin: 0 auto;
        padding:toRem(10px);
        background:#b36b00;
        color:#ffce1d;
        font-size: 18px;
        border: 3px solid #c39200;
        border-radius: 5px;
        box-shadow: 0 0 8px rgba(122,54,0,0.5) inset,0 4px 4px rgba(110,62,0,0.5) 
      }
    }
    
  }
  #loadingGif{position:fixed;z-index: 100;top: 0;left: 0;right: 0;bottom: 0;}
  #loadingGif div {background: rgba(0,0,0,.5) /*url(../images/loading.gif) no-repeat center center;*/;width: 2rem;height: 2rem;line-height: 2rem;text-align: center;color: #e48831; border-radius: 8px;position: absolute;top: 50%;left: 50%;margin: -1rem 0 0 -1rem;}
    #loading{position: fixed;z-index: 1000;left: 0;top:0;width: 100%;height: 100%;min-height: 480px; background: url(../images/000.png) no-repeat;
background-position: 50% 50%;background-size: 100% 100%}
#loading .loadbox {
    width: 100%;
    position: absolute;top: toRem(600px);
    text-align: center;
    color: #fdac0e;
    font-size: 18px;
}
#loading .process {
    margin: 10px auto;
    width: 180px;height: 12px;border-radius: 6px;position: relative;
    border: 1px solid #9e5100;background: #582000;
}
#loading .process div{
    transition: all 0.1;
    -webkit-transition: all 0.5s;
    position: absolute;top: 0;left: 0;border-radius: 5px;
    width: 0;height: 10px;
    border: 1px solid #9e5100;
    background: #ffa900;
}
#console {
  position:fixed;z-index: 50;top: 40px;left: 30;width: 200px;max-height: 200px;overflow-y: auto;
  background: rgba(0,0,0,.5);color: #c39200;
  padding: 10px;
}